<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue';
import { $t } from '@/plugins/i18n';
import { zxcvbn } from '@zxcvbn-ts/core';
import { isAllEmpty } from '@pureadmin/utils';
import { REGEXP_PWD } from '@/views/login/utils/rule';

const props = defineProps({
	form: {
		type: Object as PropType<any>,
	},
	isAdmin: {
		type: Boolean,
		default: false
	}
});

const rules = {
	oldPassword: [
		{ required: !props.isAdmin, message: '请输入原密码', trigger: 'blur' },
	],
	newPassword: [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{
			type: 'pattern',
			message: $t('login.purePassWordRuleReg'),
			trigger: ['change', 'blur'],
			pattern: REGEXP_PWD,
		},
	],
	confirmPassword: [
		{ required: true, message: '请确认新密码', trigger: 'blur' },
		{
			validator: (rule, value, callback) => {
				if (value !== props.form.newPassword) {
					callback(new Error('两次输入的密码不一致'));
				} else {
					callback();
				}
			},
			trigger: ['change', 'blur'],
		},
	],
};

const pwdProgress = [
	{ color: '#e74242', text: '非常弱' },
	{ color: '#EFBD47', text: '弱' },
	{ color: '#ffa500', text: '一般' },
	{ color: '#1bbf1b', text: '强' },
	{ color: '#008000', text: '非常强' },
];

const ruleFormRef = ref();
// 当前密码强度（0-4）
const curScore = ref(-1);

/**
 * * 监听密码强度
 */
onMounted(() => {
	watch(
		() => props.form,
		({ newPassword }) => {
			curScore.value = isAllEmpty(newPassword) ? -1 : zxcvbn(newPassword).score;
		},
		{ deep: true },
	);
});
defineExpose({ ruleFormRef });
</script>

<template>
	<div>
		<el-form ref="ruleFormRef" :model="form" :rules="rules">
			<el-form-item v-if="!isAdmin" label="原密码" prop="oldPassword">
				<el-input v-model="form.oldPassword" placeholder="请输入原密码" clearable show-password type="password" />
			</el-form-item>
			<el-form-item label="新密码" prop="newPassword">
				<el-input v-model="form.newPassword" placeholder="请输入新密码" clearable show-password type="password" />
			</el-form-item>
			<el-form-item label="确认密码" prop="confirmPassword">
				<el-input v-model="form.confirmPassword" placeholder="请再次输入新密码" clearable show-password type="password" />
			</el-form-item>
		</el-form>

		<div class="mt-4 flex">
			<div v-for="(item, index) in pwdProgress" :key="index" class="w-[19vw]">
				<div :style="{ marginLeft: index !== 0 ? '4px' : 0 }">
					<el-progress :color="item.color" :duration="curScore === index ? 6 : 0" :percentage="curScore >= index ? 100 : 0" :show-text="false" :stroke-width="10" striped striped-flow />
					<p :style="{ color: curScore === index ? item.color : '' }" class="text-center">{{ item.text }}</p>
				</div>
			</div>
		</div>
	</div>
</template>
